<template>
  <div class="data-list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="rbNoteId" label="笔记ID" width="100"></el-table-column>
      <el-table-column prop="clientId" label="客户ID" width="100"></el-table-column>
      <el-table-column prop="clientName" label="客户名" width="80"></el-table-column>
      <el-table-column prop="commentContent" label="评论内容" width="100"></el-table-column>
      <el-table-column prop="noteContent" label="笔记内容" width="360">
        <template #default="scope">
          <a 
          @click.prevent="openInNewTab(scope.row)"
            style="text-decoration: underline; color: blue; cursor:pointer">{{ scope.row.noteContent }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="noteKeyWord" label="笔记关键词" width="60"></el-table-column>
      <el-table-column prop="commentKeyWord" label="评论关键词" width="60"></el-table-column>
      <!-- <el-table-column prop="clientActivityId" label="活动ID" width="60"></el-table-column> -->
      <el-table-column prop="activityTime" label="活动时间" width="100"></el-table-column>
      <el-table-column label="操作" width="280" align="center" key="slot">
        <template #default="scope">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-button @click="showUpdateKeywordDialog(scope.row)" type="primary" size="small">修改关键词</el-button>
            </el-col>
            <el-col :span="12">
              <el-button @click="intoMessageArray(scope.row)" type="warning" size="small">进入消息数组</el-button>
            </el-col>
            <el-col :span="12">
              <el-button 
                @click="setNoteRefresh(scope.row)" 
                  :type="getButtonType(scope.row.isRefresh)"
                  size="small" 
                  style="margin-top: 20px;">标记刷新笔记</el-button>
            </el-col>
            <el-col :span="12">
              <el-button 
                @click="setNoteEdited(scope.row)" 
                :type="getButtonType(scope.row.isEdited)"
                size="small" 
                style="margin-top: 20px;">标记已编辑</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改关键词的对话框 -->
    <el-dialog 
      title="修改关键词" 
      modal-append-to-body
      v-model="dialogVisible"
      width="30%"
      @open="focusInput">
      <el-input 
      v-model="newKeyword" 
      placeholder="请输入新的关键词" 
      clearable
      @keyup.enter="confirmUpdateKeyword"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateKeyword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import ElementUI from 'element-plus';

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      currentRow: null,
      newKeyword: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/rb/data/getUneditedData')
        .then(response => {
          console.log(response.data)
          this.tableData = response.data;
        })
        .catch(error => {
          console.error('There was an error fetching the data!', error);
        });
    },
    openInNewTab(row) {
      // 调用 goToCommentList 方法
      // this.goToCommentList(row);

      // 打开新标签页
      const url = `/commentList/${row.rbNoteId}`;
      window.open(url, '_blank');
    },
    showUpdateKeywordDialog(row) {
      this.currentRow = row;
      console.log('current row is',this.currentRow)
      this.dialogVisible = true;
      console.log(this.dialogVisible)
    },
    confirmUpdateKeyword() {
      console.log('current row is',this.currentRow)
      if (this.newKeyword.trim() === '') {
        this.$message.error('请输入有效的关键词');
        return;
      }

      const { noteId, clientActivityId,clientId } = this.currentRow;

      axios.post('http://localhost:8080/rb/data/updateKeyword', null, {
        params: {
          keyword: this.newKeyword,
          activityId: this.currentRow.clientActivityId,
          noteId: this.currentRow.rbNoteId,
          clientId:this.currentRow.clientId
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('关键词更新成功');
        this.dialogVisible = false;
        this.newKeyword = '';
        this.fetchData(); // 刷新表格数据
      }).catch(error => {
        // 处理错误
        this.$message.error('更新关键词失败');
        console.error('Error updating keyword:', error);
      });
    },
    intoMessageArray(row) {
      const { clientId, activityTime } = row;
      axios.post('http://localhost:8080/rb/data/intoMessageArray', null, {
        params: {
          clientId: clientId,
          activityTime: activityTime
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('进入消息队列成功');
        console.log('Entered message array successfully:', response);
      }).catch(error => {
        // 处理错误
        this.$message.error('进入消息队列失败');
        console.error('Error entering message array:', error);
      });
    },
    setNoteRefresh(row) {
      const { rbNoteId } = row;
      axios.post('http://localhost:8080/rb/data/setNoteRefresh', null, {
        params: {
          noteId: rbNoteId
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('设置笔记刷新成功');
        console.log('Note refreshed successfully:', response);
      }).catch(error => {
        // 处理错误
        this.$message.error('设置笔记刷新失败');
        console.error('Error refreshing note:', error);
      });
    },
    setNoteEdited(row) {
      const { rbNoteId } = row;
      axios.post('http://localhost:8080/rb/data/setNoteEdited', null, {
        params: {
          noteId: rbNoteId
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('设置笔记编辑成功');
        console.log('Note refreshed successfully:', response);
      }).catch(error => {
        // 处理错误
        this.$message.error('设置笔记编辑失败');
        console.error('Error refreshing note:', error);
      });
    },
    getButtonType(isField) {
      if (isField == 1) {
        return 'info'; // 灰色
      }else{
        return 'warning';// 橙色
      }
    },
    focusInput() {
      this.$nextTick(() => {
        this.$refs.keywordInput.focus(); // 自动聚焦输入框
      });
    },
    goToCommentList(row) {
      this.$router.push({
        name: 'commentList',
        params: { noteId: row.rbNoteId }
      });
    }
  }
};
</script>

<style scoped>
.data-list {
  margin: 30px auto;
  max-width: 1800px;
}
</style>